<!DOCTYPE html>
<html lang="en">
{% load static %}
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src={% static 'js/jquery-3.3.1.min.js' %}></script>
    <script  type="text/javascript" src={% static 'js/jquery.validate.min.js' %}></script>
    <link rel="stylesheet" href={% static 'layui-v2.2.6/layui/css/layui.css' %} />
    <script type="text/javascript" src={% static 'layui-v2.2.6/layui/layui.js' %}></script>
</head>
<body >
<div class="main">
<form class="layui-form" action=""  method="post" style="padding-left: 500px;padding-top: 180px">
        {% csrf_token %}
      <h3 style="padding-left: 135px;padding-bottom: 10px">用户注册</h3>

  <div class="layui-form-item">
    <label class="layui-form-label">用户：</label>
    <div class="layui-input-inline">
      <input type="text" name="name" id="name" required  lay-verify="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码：</label>
    <div class="layui-input-inline">
      <input type="password" name="password" id="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">确认：</label>
    <div class="layui-input-inline">
      <input type="password" name="surepassword" id="repassword" required lay-verify="repassword" placeholder="请确认密码" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">邮箱：</label>
    <div class="layui-input-inline">
      <input type="text" name="email" id="email" required  lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话：</label>
    <div class="layui-input-inline">
      <input type="text" name="phone" id="phone" required  lay-verify="phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
    </div>
  </div>


  <div class="layui-form-item">
    <div class="layui-input-block" style="padding-left: 40px">
      <button class="layui-btn" type="button" id="submit" >注册</button>
    </div>
  </div>
    <div>
    <a href="/login">返回登陆</a>
    </div>
</form>
</div>
<script>

layui.use('form', function(){
  var form = layui.form;

  form.verify({
      name: function(value, item){ //value：表单的值、item：表单的DOM对象
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '用户名首尾不能出现下划线\'_\'';
        }
        if(/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
      }

      //我们既支持上述函数式的方式，也支持下述数组的形式
      //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
      ,password: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ],repassword: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ]
    });
});
 $("#submit").click(function(){
        var name=$('#name').val();
        var password=$('#password').val();
        var email=$('#email').val();
        var phone=$('#phone').val();

        $.ajax({
            url:'/registerForm/',
            type:'POST',
            data: {
                "name": name,
                "email": email,
                "phone": phone,
                "password":password
            },
            success: function(data) {
                console.log("failed")
                if(data=="注册成功")
                 layer.msg(data,{icon: 6},{time:500});
                else
                  layer.msg(data,{icon: 5},{time:500});
                if(data=="注册成功"){
                     setTimeout(function () {
                         console.log("success")
                         window.location.href="/login"
                     }, 1000)
                }
            }
        });
    });
</script>
</body>
</html>